/* eslint-disable camelcase */
import _ from 'lodash';
import _random from 'lodash/random';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Image, StyleSheet, Animated, Easing } from 'react-native';
import { Utils } from 'tuya-panel-kit';
import Res from '../../res';

const { width: DEVICE_WIDTH, height: DEVICE_HEIGHT } = Utils.RatioUtils;

export default class FadeSnow extends Component {
  static propTypes = {
    active: PropTypes.bool,
    duration: PropTypes.number,
  };

  static defaultProps = {
    active: false,
    duration: 5000,
  };

  constructor(props) {
    super(props);
    this.reload = false;
    this.state = {
      valueXY: new Animated.Value(0),
      fadeInOpacity: new Animated.Value(1),
      valueXY1: new Animated.Value(0),
      fadeInOpacity1: new Animated.Value(0),

      valueXY2: new Animated.Value(0),
      fadeInOpacity2: new Animated.Value(0),

      valueXY3: new Animated.Value(0),
      fadeInOpacity3: new Animated.Value(0),
    };
  }

  componentDidMount() {
    this.startAllAnimations();
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { active } = this.props;
    if (active !== nextProps.active) {
      this.reload = true;
    }
  }

  componentDidUpdate() {
    if (this.reload) {
      this.startAllAnimations();
      this.reload = false;
    }
  }

  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);
    this.timer2 && clearTimeout(this.timer2);
    this.timer3 && clearTimeout(this.timer3);
    this.stopAllAnimations();
  }

  getRandomX1() {
    const randomX1 = _random(5, DEVICE_WIDTH / 3);
    const randomX1b = _random(randomX1, randomX1 + _random(-40, 40));
    return [randomX1, randomX1b];
  }

  getRandomX2() {
    const randomX1 = _random(DEVICE_WIDTH / 3, (DEVICE_WIDTH / 3) * 1.5);
    const randomX1b = _random(randomX1, randomX1 + _random(-40, 40));
    return [randomX1, randomX1b];
  }

  getRandomX3() {
    const randomX1 = _random((DEVICE_WIDTH / 3) * 2, DEVICE_WIDTH);
    const randomX1b = _random(randomX1, randomX1 + _random(-40, 40));
    return [randomX1, randomX1b];
  }

  getRandomY1() {
    const randomYin = _random(-20, 10);
    const randomYout = _random(250, DEVICE_HEIGHT / 2);
    return [randomYin, randomYout];
  }

  startAllAnimations() {
    const { active } = this.props;
    if (active) {
      this.startAnimation();
      this.timer = setTimeout(() => {
        this.startAnimation1();

        console.log("把一个定时器的引用挂在this上");
      }, 2500);
      this.timer2 = setTimeout(() => {
        this.startAnimation2();

        console.log("把一个定时器的引用挂在this上");
      }, 4500);
      this.timer3 = setTimeout(() => {
        this.startAnimation3();

        console.log("把一个定时器的引用挂在this上");
      }, 6500);
    } else {
      this.stopAllAnimations();
    }
  }

  startAnimation() {
    const { active, duration } = this.props;
    const { fadeInOpacity, valueXY } = this.state;
    if (active) {
      fadeInOpacity.setValue(1);
      valueXY.setValue(0);

      Animated.parallel([
        Animated.timing(valueXY, {
          toValue: 1,
          duration: 9000,
          easing: Easing.out(Easing.cubic),
          useNativeDriver: true,
        }),
        Animated.timing(fadeInOpacity, {
          toValue: 0,
          duration: 9000,
          easing: Easing.out(Easing.cubic),
          useNativeDriver: true,
        }),
      ]).start(({ finished }) => {
        console.log('结束 ~~~~');
        finished && this.startAnimation();
      });
    }
  }

  startAnimation1() {
    const { active, duration } = this.props;
    const { fadeInOpacity1, valueXY1 } = this.state;
    if (active) {
      fadeInOpacity1.setValue(1);
      valueXY1.setValue(0);

      Animated.parallel([
        Animated.timing(valueXY1, {
          toValue: 1,
          duration: 9000,
          easing: Easing.out(Easing.cubic),
          delay: 0,
          useNativeDriver: true,
        }),
        Animated.timing(fadeInOpacity1, {
          toValue: 0,
          duration: 9000,
          easing: Easing.out(Easing.cubic),
          delay: 0,
          useNativeDriver: true,
        }),
      ]).start(({ finished }) => {
        finished && this.startAnimation1();
      });
    }
  }

  startAnimation2() {
    const { active, duration } = this.props;
    const { fadeInOpacity2, valueXY2 } = this.state;
    if (active) {
      fadeInOpacity2.setValue(1);
      valueXY2.setValue(0);

      Animated.parallel([
        Animated.timing(valueXY2, {
          toValue: 1,
          duration: 9000,
          easing: Easing.out(Easing.cubic),
          useNativeDriver: true,
        }),
        Animated.timing(fadeInOpacity2, {
          toValue: 0,
          duration: 9000,
          easing: Easing.out(Easing.cubic),
          useNativeDriver: true,
        }),
      ]).start(({ finished }) => {
        console.log('结束 ~~~~');
        finished && this.startAnimation2();
      });
    }
  }

  startAnimation3() {
    const { active, duration } = this.props;
    const { fadeInOpacity3, valueXY3 } = this.state;
    if (active) {
      fadeInOpacity3.setValue(1);
      valueXY3.setValue(0);

      Animated.parallel([
        Animated.timing(valueXY3, {
          toValue: 1,
          duration: 9000,
          easing: Easing.out(Easing.cubic),
          delay: 0,
          useNativeDriver: true,
        }),
        Animated.timing(fadeInOpacity3, {
          toValue: 0,
          duration: 9000,
          easing: Easing.out(Easing.cubic),
          delay: 0,
          useNativeDriver: true,
        }),
      ]).start(({ finished }) => {
        finished && this.startAnimation3();
      });
    }
  }

  stopAllAnimations() {
    const { fadeInOpacity, fadeInOpacity1, valueXY, valueXY1, fadeInOpacity2, fadeInOpacity3, valueXY2, valueXY3 } = this.state;
    valueXY.stopAnimation();
    fadeInOpacity.stopAnimation();
    valueXY1.stopAnimation();
    fadeInOpacity1.stopAnimation();
    valueXY2.stopAnimation();
    fadeInOpacity2.stopAnimation();
    valueXY3.stopAnimation();
    fadeInOpacity3.stopAnimation();
  }

  render() {
    const randomSize = _random(13, 18);
    const randomSize2 = _random(15, 18);
    const randomSize3 = _random(12, 20);
    const { fadeInOpacity, fadeInOpacity1, valueXY, valueXY1, fadeInOpacity2, fadeInOpacity3, valueXY2, valueXY3 } = this.state;

    return (

      <View style={styles.container}>
        <View style={styles.container}>
          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2 * 3,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>
        </View>
        <View style={styles.container}>
          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity,
              transform: [
                {
                  translateX: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity1,
              transform: [
                {
                  translateX: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY1.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2 * 3,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>
        </View>
        <View style={styles.container}>
          <Animated.View
            style={{
              // opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2 * 3,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>
        </View>
        <View style={styles.container}>
          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize3,
                  height: randomSize3,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity2,
              transform: [
                {
                  translateX: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY2.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize,
                  height: randomSize,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX1(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX2(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>

          <Animated.View
            style={{
              opacity: fadeInOpacity3,
              transform: [
                {
                  translateX: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomX3(),
                  }),
                },
                {
                  translateY: valueXY3.interpolate({
                    inputRange: [0, 1],
                    outputRange: this.getRandomY1(),
                  }),
                },
              ],
            }}
          >
            <Image
              source={Res.snow1}
              style={[
                styles.circleView,
                {
                  width: randomSize2 * 3,
                  height: randomSize2,
                },
              ]}
            />
          </Animated.View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },

  circleView: {
    height: 32,
    width: 32,
  },
});
